<md-progress-linear ng-show="workspacePluginsController.isLoading" md-mode="indeterminate"></md-progress-linear>
<div flex layout="column" md-theme="maincontent-theme" class="plugins-page">
  <che-list-header-additional-parts>
    <div che-multi-transclude-part="che-list-add-button">
    </div>
    <div che-multi-transclude-part="che-list-search">
      <che-list-header-search placeholder="Search"
                              query="workspacePluginsController.pluginFilter.displayName"
                              on-change="workspacePluginsController.onSearchChanged(query)"></che-list-header-search>
    </div>
  </che-list-header-additional-parts>
  <div class="che-scroll-list" ng-hide="workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
    <div>
      <div>
        <che-list-header>
          <div flex="100"
               layout="row"
               layout-align="start stretch"
               class="che-list-item-row">
            <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
            <div flex layout="row" layout-align="start center" class="che-list-item-details">
              <che-list-header-column flex="10" layout="column" layout-align="center start"
                                      che-sort-value="workspacePluginsController.pluginOrderBy"
                                      che-sort-item="isEnabled"
                                      che-column-title="Enable"></che-list-header-column>
              <che-list-header-column flex="25" layout="column" layout-align="center start"
                                      che-sort-value="workspacePluginsController.pluginOrderBy"
                                      che-sort-item="displayName"
                                      che-column-title="Plugin"></che-list-header-column>
              <che-list-header-column flex="15" layout="column" layout-align="center start"
                                      che-column-title="Version"></che-list-header-column>
              <che-list-header-column flex="50" layout="column" layout-align="center start"
                                      che-column-title="Description"></che-list-header-column>
            </div>
          </div>
        </che-list-header>
        <!-- plugins list  -->
        <che-list class="plugins-list" flex
                  ng-if="workspacePluginsController.plugins && workspacePluginsController.plugins.size > 0">
          <div class="plugin-item"
               ng-repeat="plugin in workspacePluginsController.cheListHelper.getVisibleItems() | orderBy:[workspacePluginsController.pluginOrderBy, 'displayName' ]">
            <che-list-item flex>
              <div flex="100"
                   layout="row"
                   layout-align="start stretch"
                   plugin-item-name="{{plugin.displayName}}"
                   plugin-item-version="{{plugin.version}}"
                   class="che-list-item-row">
                <div layout="row" layout-align="center center" class="che-list-item-checkbox">
                    <span ng-show="(plugin.isEnabled && plugin.isDeprecated)===true" class="fa fa-warning"
                          uib-tooltip-html="workspacePluginsController.getWarningMessage(plugin.id)"
                          tooltip-append-to-body="true"></span>
                </div>
                <div flex layout="row" layout-align="start center">
                  <!-- isEnabled -->
                  <div flex="10">
                    <md-switch ng-model="plugin.isEnabled"
                               ng-change="workspacePluginsController.updatePlugin(plugin)"
                               aria-label="plugin"
                               plugin-switch="{{plugin.displayName}}">
                    </md-switch>
                  </div>
                  <!-- Name -->
                  <div flex="25">
                      <span class="che-list-item-name"
                            plugin-name="{{plugin.displayName}}">{{plugin.displayName}}</span>
                    <span ng-if="plugin.publisher"
                          class="che-list-item-secondary">({{plugin.publisher}} publisher)</span>
                  </div>
                  <!-- Version -->
                  <div flex="15">
                    <select class="che-version-dropdown" ng-model="plugin.selected"
                            ng-change="workspacePluginsController.updateSelectedPlugin(plugin)"
                            ng-init="plugin.selected" ng-options="ver.value as ver.label for ver in plugin.versions">
                    </select>
                  </div>
                  <!-- Description -->
                  <div flex="50">
                    <span class="che-list-item-secondary" plugin-description="{{plugin.description}}">{{plugin.description}}</span>
                  </div>
                </div>
              </div>
            </che-list-item>
          </div>
        </che-list>
      </div>
    </div>
  </div>
  <div class="che-list-empty">
    <span ng-show="workspacePluginsController.plugins.length > 0 && workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
      No plugins found.
    </span>
    <span ng-show="workspacePluginsController.plugins.length === 0">There are no plugins.</span>
  </div>
</div>
